// ignore_for_file: must_be_immutable

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('这是列表页面')),
      body: const MyText(),
    ),
  ));
}

// Stack组件的使用，没有父元素的话，相对于浏览器窗口定位，所有子元素的定位方式相同，排在后面的元素层级更高
class MyText1 extends StatelessWidget {
  const MyText1({super.key});
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          height: 300,
          width: 300,
          color: Colors.red,
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.yellow,
        ),
        const Text('你好flutter'),
      ],
    );
  }
}

// Stack和Positioned组件的使用 stack的子元素相对于父元素定位，可以指定定位的位置
class MyText2 extends StatelessWidget {
  const MyText2({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      color: Colors.red,
      child: Stack(
        children: [
          // 处在后面的children层级比较高
          Positioned(
              left: 0,
              top: 0,
              // width: 100,
              // height: 100,
              child: Container(
                height: 100,
                width: 100,
                color: Colors.yellow,
              )),
          const Text('这是文字')
        ],
      ),
    );
  }
}

class MyText3 extends StatelessWidget {
  const MyText3({super.key});
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Stack(
      children: [
        ListView(
          padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
          children: const [
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
            ListTile(title: Text('这是列表项1')),
            ListTile(title: Text('这是列表项2')),
            ListTile(title: Text('这是列表项3')),
            ListTile(
                title: Text(
              '这是列表项4',
              style: TextStyle(color: Colors.red),
            )),
          ],
        ),
        Positioned(
            top: 0,
            left: 0,
            // 配置子元素的宽度和高度
            height: 50,
            width: size.width,
            child: Container(
              alignment: Alignment.center,
              color: Colors.black,
              child: const Text(
                '这是标题',
                style: TextStyle(color: Colors.white),
              ),
            ))
      ],
    );
  }
}

// Align组件的使用 可以设置元素的位置
class MyText4 extends StatelessWidget {
  const MyText4({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      color: Colors.red,
      child: const Align(
        alignment: Alignment.center,
        child: Text('这是文字'),
      ),
    );
  }
}

// stack和align的搭配, 设置元素的间距在中间
class MyText5 extends StatelessWidget {
  const MyText5({super.key});
  @override
  Widget build(BuildContext context) {
    return const Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Align(
          child: Text('收藏'),
        ),
        Align(
          child: Text('购买'),
        )
      ],
    );
  }
}

// 和MyText5效果相同
class MyText6 extends StatelessWidget {
  const MyText6({super.key});
  @override
  Widget build(BuildContext context) {
    return const Stack(
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: Text('收藏'),
        ),
        Align(
          alignment: Alignment.topRight,
          child: Text('购买'),
        )
      ],
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 50,
          // stack在容器中使用时，需要指定父容器的宽高
          child: Stack(
            children: [
              Align(
                alignment: Alignment.bottomLeft,
                child: Text('收藏'),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Text('购买'),
              )
            ],
          ),
        )
      ],
    );
  }
}
